window.addEventListener('load',function () {
    var focus = document.querySelector('.focus');
    var ul = focus.children[0];
    var ol = focus.children[1];
    // 获取focus宽度
    var w = focus.offsetWidth;
    // 利用定时器自动轮播图片
    var index = 0;
    
    // 动态生成小圆圈
    for(var i = 0; i < ul.children.length - 2; i++) {
        var li = document.createElement('li');
        ol.appendChild(li);
    }
    ol.children[0].classList.add('current');

    // 自动播放
    var timer = setInterval(function () {
        index++;
        var translatex = -index * w;
        // 加个过渡效果看起来有滚动效果
        ul.style.transition = 'all .3s';
        ul.style.transform = 'translateX(' + translatex + 'px)';
        
    },2000);

    //等着过度完成之后再去判断  监听过渡结束的事件 transitionend
    ul.addEventListener('transitionend',function () {
        // 无缝滚动
        if(index >= ul.children.length - 2) {
            // 已经到 克隆到最后的第一张图了
            index = 0;
            // 此时要去掉过渡效果 不然滚动回来很low 让ul快读跳到目标位置
            ul.style.transition = 'none';
            // 再利用最新的索引乘以宽度去移动图片
            var translatex = -index * w;
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }
        else if(index < 0) {
            // 已经到 克隆到最前面的最后一张图了
            index = ul.children.length - 3;
            ul.style.transition = 'none';
            var translatex = -index * w;
            ul.style.transform = 'translateX(' + translatex + 'px)';
        }

        // 小圆点跟随变化
        // 把ol里面li带有current类名的选出来去掉类名 remove
        ol.querySelector('li.current').classList.remove('current');
        // 让当前索引号 的li 加上current类名
        ol.children[index].classList.add('current');
    });
    
    // 手指滑动轮播图
    // 触摸元素 touchstart:获取手指初始坐标
    var startX = 0;
    var moveX = 0;  //后面我们会使用这个移动距离所以要定义一个全局变量
    var flag = false;
    
    ul.addEventListener('touchstart',function (e) {
        startX = e.targetTouches[0].pageX;
        // 手指触摸的时候停止计时器
        clearInterval(timer);
    });
    
    // 移动手指touchmove:计算手指的滑动距离，并且移动盒子
    ul.addEventListener('touchmove',function (e) {
        // 计算移动距离
        moveX = e.targetTouches[0].pageX - startX;
        // 移动盒子 ： 盒子原来的位置 + 手指移动的移动距离
        var translatex = -index * w + moveX;
        // 手指拖动的时候不需要动画效果，去掉过渡
        ul.style.transition = 'none';
        ul.style.transform = 'translateX(' + translatex + 'px)';
        flag = true; // 如果手指移动，再去判断是播放还是回弹，不然不需要判断
        e.preventDefault(); // 组织滚动屏幕的行为
    });
    
    // 手指离开根据移动距离去判断是回弹还是播放上一张下一张
    ul.addEventListener('touchend',function () {
        
        if(flag) {
            // 如果移动距离大于50 我们就播放上一张或者下一张
            if(Math.abs(moveX) > 50) {
            // 如果是右滑  播放上一张  moveX是正值
                if(moveX > 0) {
                    index--;
                } 
                // 如果是左滑  播放下一张  moveX是负值
                else {
                    index++;
                }
                var translatex = -index * w;
                ul.style.transition = 'all .3s';
                ul.style.transform = 'translateX(' + translatex + 'px)';
            }
                // 如果移动距离小于50像素我们就回弹
            else {
                var translatex = -index * w;
                ul.style.transition = 'all .3s';
                ul.style.transform = 'translateX(' + translatex + 'px)';
            }
        }
        flag = false;

        // 手指离开重新开启定时器
        clearInterval(timer);
        timer = setInterval(function () {
            index++;
            var translatex = -index * w;
            // 加个过渡效果看起来有滚动效果
            ul.style.transition = 'all .3s';
            ul.style.transform = 'translateX(' + translatex + 'px)';
            
        },2000);
    });


    // 返回顶部模块制作
    var goBack = document.querySelector('.goBack');
    var nav = document.querySelector('nav');
    var body = document.body;
    window.addEventListener('scroll', function() {
        if (window.scrollY >= nav.offsetTop) {
            goBack.style.display = 'block';
        } else {
            goBack.style.display = 'none';
        }
    });
    goBack.addEventListener('click',function () {
        window.scroll(0,0);
    });
})


